import React, { useState } from 'react';
// react 数据的单向绑定 数据可以流向页面 页面数据不能改变 一定要调用修改数据的方法 这样性能更好

const MyComponent = props => {
    // const [Myname, setMyName] = useState('Jone Doe');
    // const changeName = (event) => {
    //     setMyName(event.target.value)
    // }
    // return (
    //     // <h2>My Component</h2>
    //     <>
    //         <h4>{Myname}</h4>
    //         <input value={Myname} onChange={changeName}></input> {/* input绑定了value值，value值不改变，input就不能改变 */}
    //     </>
    // )
    const [userInfo, setUserInfo] = useState({
        name: 'John',
        lastname: 'Doe'
    })
    const changeInfo = (e) => {
        console.log(e);
        setUserInfo({ ...userInfo, name: e.target.value })
    }
    return (
        <>
            <h4>{userInfo.name} {userInfo.lastname}</h4>
            <input value={userInfo.name} onChange={changeInfo}></input>
            <input value={userInfo.lastname} onChange={(e) => setUserInfo({ ...userInfo, lastname: e.target.value })}></input>
        </>
    )
}
export default MyComponent;

export const SecondComponent = props => {
    return (
        <h2>My Second Component</h2>
    )
}